<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模板引擎</title>
		<script type="text/javascript" src="art-template-master/art-template-master/lib/template-web.js"></script>
		<script type="text/html" id="template">
			<h1>{{title}}</h1>
			{{if data}}
			     {{each data as value i}}
			       <div>{{value}}</div>
			     {{/each}}
			{{/if}}
		</script>
		<script type="text/javascript">
		window.onload=function(){
//			function success(data){
//				var title=data.title;
//				var books =data.books;
//				var tag='<h1>'+title+'</h1>';
//				for(var i=0;i<books.length;i++){
//					tag+='<div>'+book[i]+'</div>';
//				}
//				var con =document.getElementById('container');
//				con.innerHTML=tag;
//			}
			
			var data={
				title:'图书信息',
				booksL['三国演义','水浒传','西游记','红楼梦']
			};
			
			var html=template('template',data);
			var con=document.getElementById('container');
			con.innerHTML=html;
//			success(data);
		}
		</script>
	</head>
	<body>
		<div id="container"></div>
		<?php
//			模板引擎是为了规范解析开发
//          模板+数据-》静态页面片段
//           模板引擎普遍的
//           1.artTemplate   网址：https://github.com/aui/artTemplate
//           2.tmpl
//           3.baiduTemplate
//           4.Mustache
//           5.kissyTemplate
			?>
	</body>
	
</html>